<template>
  <div class="user">
    <PageHeader 
      :formConfig='formConfig'
      @selectClick="handleSelectClick"
      @resetClick="handleResetClick"/>

    <PageContent  
      :tableConfig="tableConfig"
      tableName="scores" 
      ref="pageContentRef"
      @createClick="handleCreateClick"
      @editeClick="handleEditeClick"
      @complainClick="handleComplainClick"
      />

    <PageDialog
      ref="pageDialogRef"
      tableName="scores" 
      :dialogConfig="dialogConfig"
      :editeData="editeData"
    />

    <el-dialog v-model="isShowComplainDialog">
      <KiForm
        v-bind="dialogFeedback"
        v-model="formData"
      >
        <template #footer>
          <div class="footer">
            <el-button @click="isShowComplainDialog = false">取消</el-button>
            <el-button type="primary" @click="handleConfirmClick">确定</el-button>
          </div>
        </template>
      </KiForm>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import PageHeader from '@/components/page-header/PageHeader.vue';
import PageContent from '@/components/page-content/PageContent.vue';
import PageDialog from '@/components/page-dialog/PageDialog.vue';

import { formConfig } from './config//form-config'
import { tableConfig } from './config/table-config'
import { dialogConfig } from './config/dialog-config';
import { dialogFeedback  } from '../complains/config/dialog-config';

import useSearch from '@/hooks/useSearch';
import useDialog from '@/hooks/useDialog'
import { useTableStore } from '@/store';
import { ref } from 'vue';
import KiForm from '@/components/ki-form/KiForm.vue';

const tableStore = useTableStore()

const addCollegeForDialog = () => {
  const collegeItem = dialogConfig.formItems.find(item => item.field === 'collegeId')
  if(collegeItem){
    collegeItem.options = tableStore.collegesList.map((item:any) => {
      return {
        title:item.name,
        value:item.id
      }
    })
  }
}
const addCollegeForSearch = () => {
  const collegeItem = formConfig.formItems.find(item => item.field === 'collegeId')
  if(collegeItem){
    collegeItem.options = tableStore.collegesList.map((item:any) => {
      return {
        title:item.name,
        value:item.id
      }
    })
  }
}
addCollegeForSearch()
const [handleSelectClick,handleResetClick,pageContentRef] = useSearch()
const [pageDialogRef, editeData,handleCreateClick,handleEditeClick] = useDialog(addCollegeForDialog,addCollegeForDialog)


const isShowComplainDialog = ref(false)
const formOrignData:any = {}
const formItems = dialogFeedback.formItems || []
for(const item of formItems){
  formOrignData[`${item.field}`] = ''
}
const formData = ref(formOrignData)
const resultId = ref()
const handleComplainClick = (info:any) => {
  resultId.value = info.id
  isShowComplainDialog.value = true
}
const handleConfirmClick = () => {
  tableStore.createTableAction('complains',{...formData.value,resultId:resultId.value})
  isShowComplainDialog.value = false
}
</script>

<style scoped>
.footer{
  text-align: center;
}
</style>